<template>
  <div class="home">
    <map-container>
      <template v-slot>
        <div class="main">
          <div class="left">
            <item-wrap style="height:60%;" title="各街道自助终端分布情况">
              <div id="terminal"></div>
            </item-wrap>
            <item-wrap style="height:30%;" title="服务事项统计">
              <div></div>
            </item-wrap>
          </div>
          <div class="right">
            <item-wrap style="height:30%;" title="便民场所类型">
              <div></div>
            </item-wrap>
            <item-wrap style="height:60%;" title="各街道场所分布情况">
              <div></div>
            </item-wrap>
          </div>
        </div>
      </template>
    </map-container>
  </div>
</template>

<script>
import MapContainer from "@/components/MapContainer.vue";
import ItemWrap from '@/components/item-wrap/item-wrap.vue'
var AMap
export default {
  name: 'HomeView',
  components: {
    MapContainer,
    ItemWrap
  },
  mounted() {
    // this.init()
  },
  methods: {
    init() {
      AMap = window.AMap
      console.log(window.AMap)
      //实时路况图层
      var trafficLayer = new AMap.TileLayer.Traffic({
          zIndex: 10
      });
      window.$map.add(trafficLayer);//添加图层到地图
    },
    // 统计自助终端
    getTerminal() {
      this.$get('/zw/map/getTerminal').then(res => {
        
      })
    }
  }
}
</script>

<style lang="less" scoped>
.main {
  display: flex;
  padding: 100px 50px 0;
  justify-content: space-between;
  height: 80vh;
}
.left {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.right {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
</style>
